<template>
  <div class="full-box shadow-box padding-box">
    <OperateCommon :showSearch="true" :showAdd="false" @search="initData">
      <template #condition>
        <div class="condition-item">
          <el-select
            v-model="queryParams.yellow_state_text"
            value-key=""
            placeholder="按状态查询 默认（所有）"
            clearable
            filterable
          >
            <el-option :key="3" label="已督办" value="已督办"></el-option>
            <el-option :key="2" label="已关注" value="已关注"></el-option>
            <el-option :key="1" label="已回复" value="已回复"></el-option>
            <el-option :key="4" label="已办结" value="已办结"></el-option>
            <el-option :key="5" label="已退回" value="已退回"></el-option>
            <el-option :key="6" label="暂未处理" value="暂未处理"></el-option>
          </el-select>
        </div>
        <div class="condition-item">
          <el-input
            v-model="queryParams.object_name"
            placeholder="按项目名称关键字查询"
            clearable
          ></el-input>
        </div>
        <div class="condition-item">
          <el-date-picker
            style="width: 150px"
            v-model="queryParams.start_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
            clearable
          >
          </el-date-picker>
        </div>
        <div class="condition-item">
          <el-date-picker
            style="width: 150px"
            v-model="queryParams.end_date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
            clearable
          >
          </el-date-picker>
        </div>
      </template>
    </OperateCommon>
    <div class="table-wrapper">
      <BaseTable
        :columns="columns"
        :showSort="true"
        :tableData="tableData"
        :pages="{
          show: true,
          count: count
        }"
        :operate="{
          show: true,
          width: 200
        }"
        @pagination="pageChange"
      >
        <template #operate="{ current }">
          <el-button
            v-if="needFeedback(current.row)"
            type="warning"
            size="mini"
            :disabled="current.row.yellow_feed_back != ''"
            @click="noticeFeedback(current.row)"
            >关注反馈
          </el-button>
          <el-button type="primary" size="mini" @click="linkWhere(current.row)"
            >详情</el-button
          >
          <!-- <el-button
            type="danger"
            size="mini"
            @click="deleteConfirm(current.row.id)"
            >删除</el-button
          > -->
        </template>
      </BaseTable>
    </div>
    <el-dialog
      title="关注反馈"
      :visible.sync="dialog.noticeFeedback"
      width="700px"
      @close="dialog.noticeFeedback = false"
    >
      <div v-if="current">
        <el-form
          :model="noticeForm"
          ref="noticeForm"
          :rules="noticeRules"
          label-width="100px"
          :inline="false"
        >
          <el-form-item label="监管部门">
            <el-input v-model="current.yellow_know_dept" disabled></el-input>
          </el-form-item>
          <el-form-item label="责任人" prop="yellow_feed_user">
            <el-input v-model="noticeForm.yellow_feed_user"></el-input>
          </el-form-item>
          <el-form-item label="情况说明" prop="yellow_feed_back">
            <el-input
              type="textarea"
              v-model="noticeForm.yellow_feed_back"
              :autosize="{
                minRows: 3,
                maxRows: 6
              }"
            ></el-input>
          </el-form-item>
          <el-form-item label="附件">
            <CommonUpload
              :pid="current.id"
              tableName="notice-feedback"
              :useType="'1'"
            ></CommonUpload>
          </el-form-item>
          <el-form-item label="反馈时间">
            <el-date-picker
              v-model="noticeForm.yellow_feed_time"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="dialog.noticeFeedback = false">取消</el-button>
        <el-button type="primary" @click="sendNoticeFeedback">反馈</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseTable from '@/components/Common/BaseTable.vue';
import OperateCommon from '@/components/Common/OperateCommon.vue';
import LinkTo from '@/mixins/LinkTo';
import {
  getYellowAlertList,
  postNoticeFeedback
} from '@/api/YellowAlert/Index';
import { required } from '@/utils/eValidate';
import { getCurrentDate } from '@/utils/date';
import CommonUpload from '@/components/Common/CommonUpload.vue';
import commonList from '@/mixins/commonList';
export default {
  mixins: [LinkTo, commonList],
  components: { BaseTable, OperateCommon, CommonUpload },
  data() {
    return {
      columns: columns,
      tableData: [],
      count: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        yellow_state_text: '',
        object_name: '',
        start_date: '',
        end_date: '',
        dept_id: ''
      },
      dialog: {
        noticeFeedback: false
      },
      current: null,
      noticeForm: {
        yellow_feed_back: '',
        yellow_feed_user: '',
        yellow_feed_time: getCurrentDate()
      },
      noticeRules: {
        yellow_feed_back: [required],
        yellow_feed_user: [required]
      },
      user: JSON.parse(localStorage.getItem('user')) || ''
    };
  },
  methods: {
    initData() {
      if (!this.queryParams.start_date) {
        this.queryParams.start_date = '';
      }
      if (!this.queryParams.end_date) {
        this.queryParams.end_date = '';
      }
      getYellowAlertList(this.queryParams).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          this.count = res.num;
        }
      });
    },
    pageChange(val) {
      this.queryParams.pageNum = val.pageNum;
      this.queryParams.pageSize = val.pageSize;
      this.initData();
    },
    deleteConfirm(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteItem(id);
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    deleteItem(id) {
      deleteDept({ id: id }).then((res) => {
        if (res.code == 0) {
          this.$message.success('删除成功');
          this.initData();
        }
      });
    },
    noticeFeedback(item) {
      this.current = item;
      this.dialog.noticeFeedback = true;
    },
    sendNoticeFeedback() {
      this.$refs.noticeForm.validate((valid) => {
        if (valid) {
          this.noticeForm.id = this.current.id;
          postNoticeFeedback(this.noticeForm).then((res) => {
            if (res.code == 0) {
              this.$message.success('情况说明成功');
              this.dialog.noticeFeedback = false;
              this.initData();
            }
          });
        }
      });
    },
    linkWhere(item) {
      this.linkTo(`/yellowAlert/details/${item.id}`);
    },
    needFeedback(val) {
      if (
        val.yellow_know_status == 2 &&
        val.responsible_unit_name.trim() == this.user.dept_name.trim()
      ) {
        return true;
      }
      return false;
    }
  },
  created() {
    this.initData();
  }
};

const columns = [
  {
    prop: 'object_name',
    label: '项目名称',
    width: '',
    minWidth: '300px',
    align: ''
  },
  {
    prop: 'responsible_unit_name',
    label: '预警单位',
    width: '',
    minWidth: '200',
    align: ''
  },
  {
    prop: 'description',
    label: '预警监控点',
    width: '',
    minWidth: '300',
    align: ''
  },
  {
    prop: 'trigger_time',
    label: '预警发生时间',
    width: '200',
    minWidth: '',
    align: ''
  },
  {
    prop: 'yellow_state_text',
    label: '处置类型',
    width: '150',
    minWidth: '',
    align: ''
  }
  // {
  //   prop: "solve_time",
  //   label: "处置时间",
  //   width: "150",
  //   minWidth: "",
  //   align: "",
  // },
];
</script>

<style lang="scss" scoped></style>
